<script setup lang="ts">
	import tabbar from '@/components/tabbar.vue'
	import list from '../components/list.vue'
	import swiperTabs from '@/components/swiperTabs.vue'
	import {
		reactive,ref,watch
	} from 'vue'
	import {
		onLoad,onReachBottom
	} from '@dcloudio/uni-app'
	import common from '../../../api/common.js';
	import home from '../../../api/home.js';
	let tabs1 = ref()
	let current = ref(0)
	let parames = reactive({
		keyword: '',
		list: [],
		tabs: [
			{
				title: '推荐人脉',
				id: 0
			}
		],
		swiperCurrent: 0,
		page: 1,
		loadStatus: ''
	})
	watch(() => parames.swiperCurrent, (index) => {
		onSearch(parames.keyword,index)
	})
	const onSearch = (k: string,i?: number) => {
		if(!i) i = parames.swiperCurrent
		parames.list = []
		parames.page = 1
		members(parames.tabs[i].id)
	}
	//加载更多
	const loadmore = () => {
		if(parames.loadStatus == 'nomore') return
		members(parames.tabs[parames.swiperCurrent].id)
	}
	//人脉分类
	const getCate = async () => {
		const res = await common.getCate()
		parames.tabs = [...parames.tabs,...res.data]
		members(0)
	}
	const moreStatus = (status: string) => {
		parames.loadStatus = status
	}
	//人脉名录
	const members = async (cate_id = 0) => {
		const res = await home.members({
			city: uni.getStorageSync('address').city,
			size: 10,
			page: parames.page,
			cate_id: cate_id,
			keyword: parames.keyword
		})
		parames.list = [...parames.list,...res.data]
		if (res.data.length < 10) return moreStatus('nomore')
		if (res.data.total <= 10) {
			parames.loadStatus = 'nomore'
		} else {
			moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
		}
		if (res.data.length === 0) return false
		parames.page += 1 // 当前页加1
	}
	// tabs通知swiper切换
	const tabsChange = (index : number) => {
		parames.swiperCurrent = index
	}
	// swiper-item左右移动，通知tabs的滑块跟随移动
	const transition = (e) => {
		let dx = e.detail.dx;
		tabs1.value.setDx(dx);
	}
	const animationfinish = (e) => {
		let current2 = Number(e.detail.current)
		tabs1.value.setFinishCurrent(current2);
		parames.swiperCurrent = current2;
		current.value = current2;
	}
	onReachBottom(() => {
		loadmore()
	})
	onLoad(() => {
		getCate()
	})
</script>

<template>
	<view class="flex flex-dir-c" style="height: 100%;">
		<view style="margin: 20rpx;">
			<u-search bgColor="#fff" placeholder="搜索" :showAction="false" v-model="parames.keyword" @search="onSearch"></u-search>
		</view>
		<view class="f1">
			<swiperTabs>
				<template v-slot:tabs style="height: 100%;">
					<u-tabs-swiper name="title" barWidth="40" active-color="#333333" inactive-color="#666666" bg-color="none"
						ref="tabs1" :list="parames.tabs" :current="current" @change="tabsChange" :is-scroll="false"
						swiperWidth="750"></u-tabs-swiper>
					<swiper style="height: calc(100% - 44px);" :current="parames.swiperCurrent" @transition="transition"
						@animationfinish="animationfinish" class="swiper">
						<slot name="swiperTbs'"></slot>
						<swiper-item class="swiper-item" v-for="(item, index) in parames.tabs" :key="index">
							<scroll-view scroll-y class="scroll" @scrolltolower="loadmore">
								<list :list="parames.list" @loadmore="loadmore" :loadStatus="parames.loadStatus"/>
							</scroll-view>
						</swiper-item>
					</swiper>
					
				</template>
			</swiperTabs>
		</view>
	</view>
	
	<tabbar :current="2" />
</template>
<style lang="scss">
	page {
		background: #F8F8F8;
		height: 100%;
		overflow: auto;
	}
</style>
<style src="./index.scss" lang="scss" scoped></style>